<template>
    <div class="contentLayout memberScoresContainer">
		<pathTracking :path='path' />
        <div class="content_box">
            <!--选项卡-->
            <el-tabs v-model="activeName" @tab-click="handleClick" class="customerTabNavs tabNavsBig">
                <el-tab-pane label="会员积分" name="memberIntegral">
                    <div class="searchList">
                        <div class="common-table-title" style="height: 48px;">
                            <div class="common-table-icon" style="margin-bottom: 9px;"></div>
                            <div class="common-table-fl" style="margin-bottom: 9px;">查询条件</div>
                        </div>
                        <advancedSearch 
                            :option="filterOption"
                            @getChild="showChild"
                            @onSearch="toSearch"
                        />
                    </div>
                    <div class="tableLayout" style="margin-top:10px;">
                        <!--表格头部-->
                        <el-row>
                        <div class="tableTitle tableTitleBig">
                            <div class="tableIcon"></div>
                            <div class="tableText">会员积分列表</div>
                            <div v-if="showExport" class="exportBtn"><button><img src="@/assets/img/icon_upload.png" class="iconLayout">导出</button></div>
                        </div>
                        </el-row>
                        <!--表格内容-->
                        <tabelcom
                            :total="total"
                            :pageSize="pageSize"
                            :pageNum='pageNum'
                            :pageTotal="pageTotal"
                            :tableData="IntegraData"
                            :isSelection ='true'
                            @selectedHighlight="selectedHighlight"
                            :columns="scoreTableH"
                            @see="see"
                            @handleSelectionChange="handleSelectionChange"
                            @handleSizeChange="handleSizeChange"
                            @handleCurrentChange="handleCurrentChange"
                            :isShowEdit="isShowEdit"
                            :rightW="rightW"
                            :showScoreDetail='showScoreDetail'
                        ></tabelcom>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="积分管理" name="manageIntegral">
                    <div class="formLayout IntegralRules" style="font-size: 14px;">
                        <!-- <div style="margin-bottom: 1rem;padding-top: 1rem;">
                            <label>积分状态</label>
                            <el-switch
                                v-model="value2"
                                active-text="已启用"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </div> -->
                        <!--消费送积分规则-->
                        <div class="rules" style="padding-top:20px;">
                            <label class="item_title">消费送积分规则</label>
                            <div>
                                <div class="ruleGroup" v-if="addScoreRules">
                                    <div class="line_flex">
                                        <el-input class="input-cont" size="small" ref="rulesLeft" v-model="scoreRules.left" placeholder="请输入整数金额" />
                                        <p class="symbols">元</p> 
                                        <p style="padding-right: 1rem;">=</p>
                                        <el-input class="input-cont" size="small" ref="rulesRight" v-model="scoreRules.right" placeholder="请输入整数积分" />
                                        <p class="symbols">积分</p>
                                        <!-- <em>?</em> -->
                                        <div style="margin-left:25px" ref="rulesDate">
                                            生效日期
                                            <el-date-picker
                                                size="small"
                                                v-model="scoreRules.effectiveDate"
                                                type="date"
                                                placeholder="选择日期"
                                                formate="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                            >
                                            </el-date-picker>
                                        </div>
                                        <h4>
                                            <img class="math_symbol" src="@/assets/img/symbol_minus.png" @click="hideRules('addScoreRules')"/>
                                        </h4> 
                                    </div>
                                </div>
                                <div class="logCan" style="width: 810px;">
                                    <div style="width: 765px;" v-if="scoreRulesList.length">
                                        <div class="ruleGroup" v-for="(item, index) in scoreRulesList" :key="index" v-show="!item.del">
                                            <div class="line_flex">
                                                <el-input class="input-cont" size="small" :ref="`rulesLeft${index}`" v-model="item.left" placeholder="请输入整数金额" :disabled="!item.edit" />
                                                <p class="symbols">元</p> 
                                                <p style="padding-right: 1rem;">=</p>
                                                <el-input class="input-cont" size="small" :ref="`rulesRight${index}`" v-model="item.right" placeholder="请输入整数积分" :disabled="!item.edit" />
                                                <p class="symbols">积分</p>
                                                <!-- <em>?</em> -->
                                                <div style="margin-left:25px" :ref="`rulesDate${index}`">
                                                    生效日期
                                                    <el-date-picker
                                                        v-model="item.effectiveDate"
                                                        size="small"
                                                        type="date"
                                                        placeholder="选择日期"
                                                        formate="yyyy-MM-dd"
                                                        value-format="yyyy-MM-dd"
                                                        :disabled="!item.edit"
                                                    >
                                                    </el-date-picker>
                                                </div>
                                                <h4>
                                                    <img class="math_symbol" v-if="item.edit" src="@/assets/img/symbol_minus.png" @click="deleteThis(item, 'scoreRulesList')" />
                                                </h4> 
                                            </div>
                                        </div>
                                    </div>   
                                    <img style="margin-top: 8px;margin-left: 8px;" v-if="!addScoreRules" class="math_symbol" src="@/assets/img/symbol_add.png" @click="showRules('addScoreRules')" />
                                </div>
                            </div>
                        </div>
                        <div class="rules">
                            <label class="item_title">积分兑金额比例</label>
                            <div>
                                <div class="ruleGroup" v-if="addScoreExchange">
                                    <div class="line_flex">
                                        <el-input class="input-cont" size="small" ref="exchangeLeft" v-model="scoreExchange.left" placeholder="请输入整数金额" />
                                        <p class="symbols">元</p> 
                                        <p style="padding-right: 1rem;">=</p>
                                        <el-input class="input-cont" size="small" ref="exchangeRight" v-model="scoreExchange.right" placeholder="请输入整数积分" />
                                        <p class="symbols">积分</p>
                                        <!-- <em>?</em> -->
                                        <div style="margin-left:25px" ref="scoreDate">
                                            生效日期
                                            <el-date-picker
                                                size="small"
                                                v-model="scoreExchange.effectiveDate"
                                                type="date"
                                                formate="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期"
                                            >
                                            </el-date-picker>
                                        </div>
                                        <h4>
                                            <img class="math_symbol" src="@/assets/img/symbol_minus.png" @click="hideRules('addScoreExchange')" />
                                        </h4> 
                                    </div>
                                </div>
                                <div class="logCan" style="width: 810px;">
                                    <div style="width: 765px;" v-if="scoreExchangeList.length">
                                        <div class="ruleGroup" v-for="(item, index) in scoreExchangeList" :key="index" v-show="!item.del">
                                            <div class="line_flex">
                                                <el-input class="input-cont" size="small" :ref="`scoresLeft${index}`" v-model="item.left" placeholder="请输入整数金额" :disabled="!item.edit" />
                                                <p class="symbols">元</p> 
                                                <p style="padding-right: 1rem;">=</p>
                                                <el-input class="input-cont" size="small" :ref="`scoresRight${index}`" v-model="item.right" placeholder="请输入整数积分" :disabled="!item.edit" />
                                                <p class="symbols">积分</p>
                                                <!-- <em>?</em> -->
                                                <span style="margin-left:25px" :ref="`scoresDate${index}`">
                                                    生效日期
                                                    <el-date-picker
                                                        v-model="item.effectiveDate"
                                                        size="small"
                                                        type="date"
                                                        placeholder="选择日期"
                                                        formate="yyyy-MM-dd"
                                                        value-format="yyyy-MM-dd"
                                                        :disabled="!item.edit"
                                                    >
                                                    </el-date-picker>
                                                </span>
                                                <h4>
                                                    <img class="math_symbol" v-if="item.edit" src="@/assets/img/symbol_minus.png" @click="deleteThis(item, 'scoreExchangeList')" />
                                                </h4> 
                                            </div>
                                        </div>
                                    </div>
                                    <img v-if="!addScoreExchange" style="margin-top: 8px;margin-left: 8px;" class="math_symbol" src="@/assets/img/symbol_add.png" @click="showRules('addScoreExchange')" />
                                </div>
                            </div>
                        </div>
                        <div class="rules">
                            <label class="item_title">积分激活时间</label>
                            <div>
                                <div class="ruleGroup" v-if="addActive">
                                    <div class="line_flex">
                                        <el-radio v-model="activateTime.activeType" :label="1">立即激活</el-radio>
                                        <el-radio v-model="activateTime.activeType" :label="2">自定义</el-radio>
                                        <el-input
                                            ref="activeInterval"
                                            size="small" 
                                            style="width: 50px;margin-left: 10px;" 
                                            v-model="activateTime.activeInterval"
                                            placeholder="请输入整数" 
                                            :disabled="activateTime.activeType != 2"
                                        />
                                        <div ref="activeDate">
                                            <span class="tip">天内后自动激活（积分到账起）</span>
                                            <el-date-picker
                                                size="small"
                                                v-model="activateTime.effectiveDate"
                                                type="date"
                                                formate="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                                placeholder="请选择规则生效日期"
                                            />
                                        </div>
                                        <span class="tip">规则生效日期</span>
                                        <h4>
                                            <img class="math_symbol" src="@/assets/img/symbol_minus.png" @click="hideRules('addActive')" />
                                        </h4> 
                                    </div>
                                </div>
                                <div class="logCan" style="width: 860px;">
                                    <div style="width: 830px;" v-if="scoreExchangeList.length">
                                        <div class="ruleGroup" v-for="(item, index) in activeList" :key="index" v-show="!item.del">
                                            <div class="line_flex">
                                                <el-radio v-model="item.activeType" :label="1" :disabled="!item.edit">立即激活</el-radio>
                                                <el-radio v-model="item.activeType" :label="2" :disabled="!item.edit">自定义</el-radio>
                                                <el-input 
                                                    :ref="`activeInterval${index}`"
                                                    size="small" 
                                                    style="width: 50px;margin-left: 10px;" 
                                                    v-model="item.activeInterval" 
                                                    placeholder="请输入整数"
                                                    :disabled="!item.edit || item.activeType != 2"
                                                />
                                                <div :ref="`activeDate${index}`">
                                                    <span class="tip">天内后自动激活（积分到账起）</span>
                                                    <el-date-picker
                                                        size="small"
                                                        v-model="item.effectiveDate"
                                                        type="date"
                                                        formate="yyyy-MM-dd"
                                                        value-format="yyyy-MM-dd"
                                                        placeholder="请选择规则生效日期"
                                                        :disabled="!item.edit"
                                                    />
                                                </div>
                                                <span class="tip">规则生效日期</span>
                                                <h4>
                                                    <img class="math_symbol" v-if="item.edit" src="@/assets/img/symbol_minus.png" @click="deleteThis(item, 'activeList')" />
                                                </h4> 
                                            </div>
                                        </div>
                                    </div>
                                    <img v-if="!addActive" style="margin-top: 8px;margin-left: 8px;" class="math_symbol" src="@/assets/img/symbol_add.png" @click="showRules('addActive')" />
                                </div>
                            </div>
                        </div>
                        <div class="rules" style="margin-bottom: 0;">
                            <label class="item_title">积分有效期</label>
                            <div>
                                <div class="ruleGroup" v-if="addEffective">
                                    <div class="line_flex">
                                        <el-radio v-model="expireDate.effectiveType" :label="1">永久有效</el-radio>
                                        <el-radio v-model="expireDate.effectiveType" :label="2">次年年底有效</el-radio>
                                        <el-radio v-model="expireDate.effectiveType" :label="3">自定义</el-radio>
                                        <el-input 
                                            ref="effectiveInterval"
                                            size="small" 
                                            style="width: 50px;margin-left: 10px;" 
                                            placeholder="请输入整数"
                                            v-model="expireDate.effectiveInterval"
                                            :disabled="expireDate.effectiveType != 3"
                                        />
                                        <div ref="expireDate">
                                            <span class="tip">天内有效（积分到账起）</span>
                                            <el-date-picker
                                                size="small"
                                                v-model="expireDate.effectiveDate"
                                                type="date"
                                                formate="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                                placeholder="请选择规则生效日期"
                                            />
                                        </div>
                                        <span class="tip">规则生效日期</span>
                                        <h4>
                                            <img class="math_symbol" src="@/assets/img/symbol_minus.png" @click="hideRules('addEffective')" />
                                        </h4>
                                    </div>
                                </div>
                                <div class="logCan" style="width: 980px;">
                                    <div style="width: 930px;" v-if="scoreExchangeList.length">
                                        <div class="ruleGroup" v-for="(item, index) in effectiveList" :key="index" v-show="!item.del">
                                            <div class="line_flex">
                                                <el-radio v-model="item.effectiveType" :label="1" :disabled="!item.edit">永久有效</el-radio>
                                                <el-radio v-model="item.effectiveType" :label="2" :disabled="!item.edit">次年年底有效</el-radio>
                                                <el-radio v-model="item.effectiveType" :label="3" :disabled="!item.edit">自定义</el-radio>
                                                <el-input 
                                                    :ref="`effectiveInterval${index}`"
                                                    size="small"
                                                    v-model="item.effectiveInterval"
                                                    style="width: 50px;margin-left: 10px;"
                                                    placeholder="请输入整数"
                                                    :disabled="!item.edit || item.effectiveType != 3"
                                                />
                                                <div :ref="`expireDate${index}`">
                                                    <span class="tip">天内有效（积分到账起）</span>
                                                    <el-date-picker
                                                        size="small"
                                                        v-model="item.effectiveDate" 
                                                        type="date"
                                                        formate="yyyy-MM-dd"
                                                        value-format="yyyy-MM-dd"
                                                        placeholder="请选择规则生效日期"
                                                        :disabled="!item.edit"
                                                    />
                                                </div>
                                                <span class="tip">规则生效日期</span>
                                                <h4>
                                                    <img class="math_symbol" v-if="item.edit" src="@/assets/img/symbol_minus.png" @click="deleteThis(item, 'effectiveList')" />
                                                </h4> 
                                            </div>
                                        </div>
                                    </div>
                                    <img v-if="!addEffective" style="margin-top: 8px;margin-left: 8px;" class="math_symbol" src="@/assets/img/symbol_add.png" @click="showRules('addEffective')" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btnsCan" v-if="saveScore">
                        <div class="btnLayout">
                            <div class="btn" @click="addRulesLog">保存</div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import pathTracking from '@/components/common/pathTracking'// 面包屑路径
import advancedSearch from '../components/pages/advancedSearch' // 搜索列表
import tabelcom from './table'
import datas from './datas.js'
import _axios from '@/tool/http.js'
import { addRules, getRules, getLevels } from './axios.js'
// 获取按钮权限配置的方法
import operationConfig from '@/utils/btnsPermission'
export default {
    name:'memberIntegral',
    components: {
        pathTracking,
        advancedSearch,
        tabelcom
    },
    data(){
        return{
            path: ['CRM', '客户管理', '会员积分'],
            activeName: 'memberIntegral',
            filterOption: _.cloneDeep(datas.filterOption),
            searchFromData: datas.searchFromData, // 按钮的内容
            value2:true,
            value1:'',

            total:0, //总条数
			pageSize:10, //每页多少条
			pageNum:0,//当前第几页
            pageTotal:0,//总页数
            isShowEdit:false,
            rightW:100,
            //currentPage4:1,

            tableData:[],
            scoreTableH:datas.scoreTableH,
            allSearchVal:{}, //搜索框的值
            IntegraData:[],//积分表格数据
            // 新增消费送积分规则显示隐藏
            addScoreRules: false,
            // 积分规则
            scoreRules: Object.assign({}, datas.scoreRules),
            // 积分规则历史
            scoreRulesList: [],
            // 新增积分兑换金额显示隐藏
            addScoreExchange: false,
            // 积分兑换金额
            scoreExchange: Object.assign({}, datas.scoreExchange),
            // 积分兑换历史
            scoreExchangeList: [],
            // 新增激活时间显示隐藏
            addActive: false,
            activeList: [],
            // 新增积分有效期显示隐藏
            addEffective: false,
            effectiveList: [],
            // 激活时间
            activateTime: Object.assign({}, datas.activateTime),
            // 积分有效期
            expireDate: Object.assign({}, datas.expireDate),
            // 未修改时的数据
            rowArr: [],

            showScoreDetail: false,
            showExport: false,
            saveScore: false
        }
    },
    methods:{
        see(par){ //查看
            var customerID = par.id;
            this.$router.push({name:'scoreDetail',query:{id:customerID}})
        },
        // 验证输入框
        verifyInput() {
            let regExp = /^[ ]*$/
            let status = true
            // 历史可修改项的验证
            this.scoreRulesList.map((ele,index) => {
                if(ele.edit) {
                    (regExp.test(ele.left) || regExp.test(ele.right) || ele.effectiveDate == null) && (status = false)
                    regExp.test(ele.left) ? this.$refs['rulesLeft' + index][0].$el.classList.add('qxz_redInput') : this.$refs['rulesLeft' + index][0].$el.classList.remove('qxz_redInput')
                    regExp.test(ele.right) ? this.$refs['rulesRight' + index][0].$el.classList.add('qxz_redInput') : this.$refs['rulesRight' + index][0].$el.classList.remove('qxz_redInput')
                    ele.effectiveDate == null ? this.$refs['rulesDate' + index][0].classList.add('qxz_redInput') : this.$refs['rulesDate' + index][0].classList.remove('qxz_redInput')
                }
            })
            this.scoreExchangeList.map((ele,index) => {
                if(ele.edit) {
                    (regExp.test(ele.left) || regExp.test(ele.right) || ele.effectiveDate == null) && (status = false)
                    regExp.test(ele.left) ? this.$refs['scoresLeft' + index][0].$el.classList.add('qxz_redInput') : this.$refs['scoresLeft' + index][0].$el.classList.remove('qxz_redInput')
                    regExp.test(ele.right) ? this.$refs['scoresRight' + index][0].$el.classList.add('qxz_redInput') : this.$refs['scoresRight' + index][0].$el.classList.remove('qxz_redInput')
                    ele.effectiveDate == null ? this.$refs['scoresDate' + index][0].classList.add('qxz_redInput') : this.$refs['scoresDate' + index][0].classList.remove('qxz_redInput')
                }
            })
            this.activeList.map((ele, index) => {
                if(ele.edit) {
                    ele.effectiveDate == null && (status = false)
                    ele.effectiveDate == null ? this.$refs[`activeDate${index}`][0].classList.add('qxz_redInput') : this.$refs[`activeDate${index}`][0].classList.remove('qxz_redInput')
                    if(ele.activeType == 2 && regExp.test(ele.activeInterval)) {
                        status = false
                        this.$refs[`activeInterval${index}`][0].$el.classList.add('qxz_redInput')
                    }else {
                        this.$refs[`activeInterval${index}`][0].$el.classList.remove('qxz_redInput')
                    }
                }
            })
            this.effectiveList.map((ele, index) => {
                if(ele.edit && ele.effectiveType == 3) {
                    ele.effectiveDate == null && (status = false)
                    ele.effectiveDate == null ? this.$refs[`expireDate${index}`][0].classList.add('qxz_redInput') : this.$refs[`expireDate${index}`][0].classList.remove('qxz_redInput')
                    if(ele.effectiveType == 3 && regExp.test(ele.activeInterval)) {
                        status = false
                        this.$refs[`effectiveInterval${index}`][0].$el.classList.add('qxz_redInput')
                    }else {
                        this.$refs[`effectiveInterval${index}`][0].$el.classList.remove('qxz_redInput')
                    }
                }
            })
            // return
            // 新增的验证
            if(this.addScoreRules) {
                (regExp.test(this.scoreRules.left) || regExp.test(this.scoreRules.right) || this.scoreRules.effectiveDate == null) && (status = false)
                regExp.test(this.scoreRules.left) ? this.$refs.rulesLeft.$el.classList.add('qxz_redInput') : this.$refs.rulesLeft.$el.classList.remove('qxz_redInput')
                regExp.test(this.scoreRules.right) ? this.$refs.rulesRight.$el.classList.add('qxz_redInput') : this.$refs.rulesRight.$el.classList.remove('qxz_redInput')
                this.scoreRules.effectiveDate == null ? this.$refs.rulesDate.classList.add('qxz_redInput') : this.$refs.rulesDate.classList.remove('qxz_redInput')
            }
            if(this.addScoreExchange) {
                (regExp.test(this.scoreExchange.left) || regExp.test(this.scoreExchange.right) || this.scoreExchange.effectiveDate == null) && (status = false)
                regExp.test(this.scoreExchange.left) ? this.$refs.exchangeLeft.$el.classList.add('qxz_redInput') : this.$refs.exchangeLeft.$el.classList.remove('qxz_redInput')
                regExp.test(this.scoreExchange.right) ? this.$refs.exchangeRight.$el.classList.add('qxz_redInput') : this.$refs.exchangeRight.$el.classList.remove('qxz_redInput')
                this.scoreExchange.effectiveDate == null ? this.$refs.scoreDate.classList.add('qxz_redInput') : this.$refs.scoreDate.classList.remove('qxz_redInput')
            }
            if(this.addActive) {
                this.activateTime.effectiveDate == null && (status = false)
                this.activateTime.effectiveDate == null ? this.$refs.activeDate.classList.add('qxz_redInput') : this.$refs.activeDate.classList.remove('qxz_redInput')
                if(this.activateTime.activeType == 2 && regExp.test(this.activateTime.activeInterval)) {
                    status = false
                    this.$refs.activeInterval.$el.classList.add('qxz_redInput')
                }else {
                    this.$refs.activeInterval.$el.classList.remove('qxz_redInput')
                }
            }
            if(this.addEffective) {
                this.expireDate.effectiveDate == null && (status = false)
                this.expireDate.effectiveDate == null ? this.$refs.expireDate.classList.add('qxz_redInput') : this.$refs.expireDate.classList.remove('qxz_redInput')
                if(this.expireDate.effectiveType == 3 && regExp.test(this.expireDate.effectiveInterval)) {
                    status = false
                    this.$refs.effectiveInterval.$el.classList.add('qxz_redInput')
                }else {
                    this.$refs.effectiveInterval.$el.classList.remove('qxz_redInput')
                }
            }
            console.log(status,'what kind of doohickey it is')
            return status
        },
        // 添加
        addRulesLog() {
            let arr = this.diffData()
            this.addScoreRules && arr.push(this.scoreRules)
            this.addScoreExchange && arr.push(this.scoreExchange)
            this.addActive && arr.push(this.activateTime)
            this.addEffective && arr.push(this.expireDate)
            this.verifyInput() && arr && addRules(arr).then(res => {
                if(res.data.status === 200) {  
                    this.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success'
                    })
                    this.clearInput();
                    this.getRulesLog();
                }else {
                    this.$message({
                        showClose: true,
                        message: '保存失败',
                        type: 'warning'
                    })
                }
            }).catch(err => {
                console.log('err: ', err)
            })
        },
        // 验证数据没变化不发送请求
        diffData() {
            // 数据是否有变化的标志
            let isIdentical = true
            let arr = this.transportArr();
            // 判断数据是否有变化，有新增则无需判断
            if(!this.addScoreRules && !this.addScoreExchange && !this.addActive && !this.addEffective) {
                arr.length && arr.map((item, index) => {
                    Object.keys(item).map(ele => {
                        item[ele] != this.rowArr[index][ele] && (isIdentical = false)
                    })
                })
            }else {
                isIdentical = false
            }
            isIdentical && this.$message({
                message: '没有信息修改，无需保存'
            })
            return isIdentical ? false : arr
        },
        // 发送给后台用的数组
        transportArr() {
            let arr = [];
            this.scoreRulesList.map(ele => {
                ele.edit && arr.push(Object.assign({}, ele))
            })
            this.effectiveList.map(ele => {
                ele.edit && arr.push(Object.assign({}, ele))
            })
            this.activeList.map(ele => {
                ele.edit && arr.push(Object.assign({}, ele))
            })
            this.scoreExchangeList.map(ele => {
                ele.edit && arr.push(Object.assign({}, ele))
            })
            return arr
        },
        // 清空并关闭新增输入框
        clearInput() {
            this.addScoreRules = false
            this.addScoreExchange = false
            this.addActive = false
            this.addEffective = false
            this.scoreRules = Object.assign({}, datas.scoreRules)
            this.scoreExchange = Object.assign({}, datas.scoreExchange)
            this.activateTime = Object.assign({}, datas.activateTime)
            this.expireDate = Object.assign({}, datas.expireDate)
        },
        // 获取记录
        async getRulesLog() {
            let logs = await getRules();
            if(logs.data.status === 200) {
                this.scoreRulesList = logs.data.result['send']
                this.scoreExchangeList = logs.data.result['convert']
                this.activeList = logs.data.result['active']
                this.effectiveList = logs.data.result['effective']
                // 缓存后台拿来的数据
                this.$nextTick(() => {
                    this.rowArr = this.transportArr()
                })
            }
        },

        showRules(name) {
            this[name] = true
            //this.name = true
        },
        hideRules(name) {
            this[name] = false
        },
        // 点击减号删除
        deleteThis(item, name) {
            this.$confirm('确定删除么', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this[name].map((ele, index) => {
                    ele.id === item.id && (this[name][index].del = 1)
                })
            }).catch(() => {
                console.log('点击减号取消')    
            });
        },

        handleClick(tab,event){
            
        },
        showChild (val) {
            this.searchFromData = val
        },
        toSearch (val) {
            this.pageSize = 10; //点击查询，查询的页码置为1，每页条数置为10
            this.pageNum = 1;
            let allOption = {
                id:val[0].value,
                phone:val[1].value,
                name:val[2].value,
                email:val[3].value,
                // levelId:val[4].value,
                // scoreStart:val[5].value,
                // scoreEnd:val[5].value,
            }
            let doSearch = false
            if(val[0].value) {
                doSearch = true
            }
            if(val[1].value) {
                doSearch = true
            }
            if(val[2].value) {
                doSearch = true
            }
            if(val[3].value) {
                doSearch = true
            }
            if(doSearch) {
                this.allSearchVal = allOption
                this.getIntegraData(allOption)
            }else {
                this.$message({
                    message: '请选择搜索条件',
                    type: 'warning'
                })
            }
        },
        handleSelectionChange (selection) {
            // 选中的数组
            this.TableSelectData = selection
        },
        selectedHighlight (data) {
            // 如果选中则添加高亮样式
            if (this.TableSelectData.indexOf(data.row) > -1) {
                return {
                    'background-color': '#FEF6EE'
                }
                return {}
            }
        },
        // 分页
        handleSizeChange (val) { //每页多少条
            this.pageSize = val;
            this.getIntegraData(this.allSearchVal)
        },
        handleCurrentChange (val) { //当前第几页
            this.pageNum = val;
            this.getIntegraData(this.allSearchVal)
        },

        //会员积分列表
        getIntegraData(param){
            var that = this;
            that.$ajax({
                url: api.crm + '/accountRecord/list/'+ this.pageSize + '/' + this.pageNum,
				method:'POST',
				data:param || {},
            }).then((res) => {
                that.IntegraData = [];
                var data = res.data;
                if(data.status == 200){
                    var IntegraArr = data.result.list;
                    if(IntegraArr.length>0){
                        that.total = data.result.total;  //全部条数
						that.pageNum = data.result.pageNum; //当前页
						that.pageSize = data.result.pageSize; //每页数量
                        that.pageTotal = data.result.pages;//总页数
                        
                        var tdObj = {};
                        for(var i=0;i<IntegraArr.length;i++){
                            tdObj = {
                                id:IntegraArr[i].id,
                                nickname:IntegraArr[i].nickname,
                                phone:IntegraArr[i].phone,
                                name:IntegraArr[i].name,
                                email:IntegraArr[i].email,
                                level:IntegraArr[i].level,
                                score:IntegraArr[i].score,//可用积分
                            }
                            that.IntegraData.push(tdObj)
                        }
                    }else{
                        // that.$message({
						// 	message: '暂无数据',
						// 	type: 'warning'
						// });
                    }
                }
            }).catch((err) => {
               this.$message({
                    message: '获取数据失败',
                    type: 'warning'
                });
            })
            //that.tableData = [];
        },
        // 按钮权限
        btnsControl() {
            let permission = operationConfig(this.$route);
            this.showScoreDetail = false
            this.showExport = false
            this.saveScore = false
            permission.forEach(ele => {
                if(ele.menu_name === '查看') {
                    this.showScoreDetail = true
                }else if(ele.menu_name === '导出') {
                    this.showExport = true
                }else if(ele.menu_name === '积分管理_保存') {
                    this.saveScore = true
                }
            })
        }
    },
    mounted() {
        // // 获取会员等级
        // getLevels().then(res => {
        //     if(res.data.status === 200) {
        //         let arr = [{
        //             label: '请选择会员等级',
        //             value: undefined
        //         }];
        //         res.data.result.map(ele => {
        //             let obj = {
        //                 label: ele.name,
        //                 value: ele.id
        //             }
        //             arr.push(obj)
        //         })
        //         this.filterOption.items.map(ele => {
        //             ele.label === '会员等级' && (ele.data = arr)
        //         })
        //     }
        // }).catch(err => {
        //     console.log('err: ', err)
        // })
        this.getRulesLog();
        // this.getIntegraData(this.allSearchVal);
        this.btnsControl()
    },
    activated() {
        
    }
}
</script>

<style>
@import '../components/css/viewCommon.css';
</style>
<style scoped>
.searchList{
    border-radius: 8px;
    padding-bottom: 10px;
    background: #FFF;
}
.content_box{
    width: 100%;
    box-sizing: border-box;
    background-color: #f3f3f3;
    padding: 0 16px 100px 16px;
}
.formLayout{
    background-color:#fff
}
.navContent,.dr-form{
    margin-top:0 !important
}
.tableInfo{
    padding:0 16px
}
.IntegralRules .rules{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1rem;
    overflow-y: auto;
}
.ruleGroup {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 1rem;
}
.item_title{
    margin-top: .7rem;
    min-width: 10rem;
}

/*积分管理*/
.ruleGroup{
    display: inline-block;
    margin-left: 12px;
}
.ruleGroup h2 span{
    display: inline-block;
}
.ruleGroup h2 span input{
    height: 32px;
    padding:0 10px;
    border-radius: 4px;
    border:1px #dcdfe6 solid;
    margin-right:6px
}
.ruleGroup h2 i{
    display: inline-block;
    margin:0 10px
}
em{
    display: inline-block;
    width:14px;
    height: 14px;
    color:#7e6b5a;
    border-radius:50%;
    border:1px #7e6b5a solid;
    text-align:center;
    font-size:12px;
    line-height: 14px;
}
.math_symbol{
    width: 16px;
    height: 16px;
    cursor: pointer;
}
h4{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-left: 8px;
}
h4 i{
    display: flex;
    width: 1.6rem;
    height: 1.6rem;
    font-weight: bold;
    color: #fff;
    justify-content: center;
    line-height: 1.6rem;
    border-radius:50% 
}
h4 i.iconReduce{
    line-height: 1.4rem;
    background-color:#fa5e52;
    cursor: pointer;
}
h4 i.iconPlus{
    background-color:#7e6b5a;
    cursor: pointer;
}
.btnsCan{
    background: #FFF;
    padding: 1.5rem 0;
}
.btnLayout{
    text-align: center;
}
.btn{
    display: inline-block;
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background: #7e6b5a;
    text-align: center;
    line-height: 40px;
    color: #FFF;
    font-size: 14px;
    cursor: pointer;
    margin: 0 8px;
}
.tip{
    font-size: 1.4rem;
    margin-left: .5rem;
}
.symbols{
    padding-left: 1rem;
    padding-right: 1rem;
}
.input-cont{
    width: 150px;
}
.line_flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.logCan{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 930px;
    justify-content: flex-start;
    align-items: flex-start;
}
</style>
